<template>
  <view class="myEditor">
    <view class="headerFont">
      <text class="icon iconfont icon-tupian" @click="insertPic" />
      <text
        class="icon iconfont icon-heading-h1"
        @click="formatEditorContent('header', 'H1')"
      />
      <text
        class="icon iconfont icon-heading-h2"
        @click="formatEditorContent('header', 'H2')"
      />
      <text
        class="icon iconfont icon-heading-h3"
        @click="formatEditorContent('header', 'H3')"
      />
      <text
        class="icon iconfont icon-heading-h4"
        @click="formatEditorContent('header', 'H4')"
      />
      <text
        class="icon iconfont icon-heading-h5"
        @click="formatEditorContent('header', 'H5')"
      />
      <text
        class="icon iconfont icon-heading-h6"
        @click="formatEditorContent('header', 'H6')"
      />
      <text
        class="icon iconfont icon-bold"
        @click="formatEditorContent('bold')"
      />
      <text
        class="icon iconfont icon-underline"
        @click="formatEditorContent('underline')"
      />
      <text
        class="icon iconfont icon-italic"
        @click="formatEditorContent('italic')"
      />
      <text
        class="icon iconfont icon-text-align-left"
        @click="formatEditorContent('align', 'left')"
      />
      <text
        class="icon iconfont icon-text-align-justify"
        @click="formatEditorContent('align', 'center')"
      />
      <text
        class="icon iconfont icon-text-align-right"
        @click="formatEditorContent('align', 'right')"
      />
      <text
        class="icon iconfont icon-list-order"
        @click="formatEditorContent('list', 'ordered')"
      />
      <text
        class="icon iconfont icon-list-check"
        @click="formatEditorContent('list', 'check')"
      />
      <text
        class="icon iconfont icon-zuosuojin"
        @click="formatEditorContent('indent', '-1')"
      />
      <text
        class="icon iconfont icon-yousuojin"
        @click="formatEditorContent('indent', '+1')"
      />
      <text class="icon iconfont icon-redo" @click="redo" />
      <text class="icon iconfont icon-undo" @click="undo" />

      <text
        class="icon iconfont icon-line-height"
        @click="formatEditorContent('lineHeight', '2')"
      />
      <text
        class="icon iconfont icon-font-size"
        @click="formatEditorContent('fontSize', '24px')"
      />
      <text
        class="icon iconfont icon-zitishangbiao"
        @click="formatEditorContent('script', 'super')"
      />
      <text
        class="icon iconfont icon-zitixiabiao"
        @click="formatEditorContent('script', 'sub')"
      />
      <text
        class="icon small iconfont icon-duanqianju"
        @click="formatEditorContent('marginTop', '15px')"
      />
      <text
        class="icon small iconfont icon-duanhouju"
        @click="formatEditorContent('marginBottom', '15px')"
      />
      <text class="icon small iconfont icon-rili" @click="insertDate" />
      <text
        class="icon small iconfont icon-shanchu"
        @click="clearEDitContent"
      />
    </view>

    <!-- <button @click="getEDitContent">获取内容</button> -->
    <editor
      id="editor"
      class="ql-container"
      :placeholder="placeholder"
      @ready="onEditorReady"
      @statuschange="onStatusChange"
    ></editor>
  </view>
</template>

<script>
export default {
  name: "MyRichTextEditor",
  props: {
    // 接收当前的富文本内容
    currentEditorHtml: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      placeholder: "开始输入...",
      iconFormatStyle: [],
      editorCtx: {}, // 富文本对象
      editorContent: "",
    };
  },

  methods: {
    onEditorReady() {
      uni
        .createSelectorQuery()
        .in(this)
        .select("#editor")
        .context((res) => {
          this.editorCtx = res.context;
          this.editorCtx.setContents({
            html: this.currentEditorHtml,
          });
          console.log("checkEditor:", this.currentEditorHtml);
        })
        .exec();
    },
    // 设置富文本展示格式
    formatEditorContent(name, value) {
      console.log(name, value);
      this.editorCtx.format(name, value);
    },

    // 获取富文本内容
    getEDitContent() {
      return new Promise((resolve, reject) => {
        this.editorCtx.getContents({
          success(res) {
            resolve(res);
          },
          fail(err) {
            console.log("获取富文本内容失败：", err);
            reject(err);
          },
        });
      });
    },
    insertPic() {
      uni.chooseMedia({
        count: 1,
        success: (res) => {
          console.log("check:", res);
          this.editorCtx.insertImage({
            src: res.tempFiles[0].tempFilePath,
            width: "80%",
            success: (result) => {
              console.log(result);
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
      });
    },
    clearEDitContent() {
      this.editorCtx.clear();
    },
    insertDate() {
      const date = new Date();
      const formatDate = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.editorCtx.insertText({
        text: formatDate,
      });
    },

    // 撤销
    undo() {
      this.editorCtx.undo();
    },

    // 恢复
    redo() {
      this.editorCtx.redo();
    },
    // 富文本样式选择时触发
    onStatusChange(e) {
      //   console.log("check:", e.target);
      //   this.formats = e.detail;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./iconFont/font.css";
.headerFont {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #eee;
  .icon {
    padding: 7rpx;
    display: inline-block;
    color: #1c1c1c;
    font-size: 50rpx;
  }
  .small {
    font-size: 40rpx;
    margin-right: 15rpx;
  }
  .iconActive {
    background-color: #eee;
    color: #05a47d;
  }
}
</style>
